<template>
<div id="mainloginFrame">
  <div id="logincss">
      <h2 style="text-align: center">密码修改界面</h2>
      <el-form ref="form" label-width="100px">
        <el-form-item label="用户名：">
          <el-input  placeholder="请输入你的用户名:" v-model="userId">
          </el-input>
        </el-form-item>
        <el-form-item label="旧密码：">
          <el-input placeholder="请输入旧密码" v-model="oldpassword"></el-input>
        </el-form-item>
        <el-form-item label="新密码：">
          <el-input placeholder="请输入新密码" v-model="newpassword"></el-input>
        </el-form-item>
        <el-form-item label="确认新密码：">
          <el-input placeholder="请输入确认新密码" v-model="confirmpassword"></el-input>
        </el-form-item>
        <el-row style="text-align: center">
          <el-button @click="changepassword">修改</el-button>
          <el-button @click="returnlogin">返回</el-button>
        </el-row>


      </el-form>
  </div>
</div>
</template>

<script>
    export default {
        name: "resetpassword",
      data(){
          return{
            userId:"",
            oldpassword:"",
            newpassword:"",
            confirmpassword:"",
            verifycode:""
          }

      },

      methods: {
              returnlogin(){
                this.$router.push({path: '/'});
              },
              changepassword()
              {

                if(this.userId==""||this.oldpassword==""||this.confirmpassword==""||this.newpassword=="")
                {

                  this.userId=""
                  this.oldpassword=""
                  this.newpassword=""
                  this.confirmpassword=""
                  return this.$message.error("信息不全，请重试");
                }
                else if(this.confirmpassword!=this.newpassword)
                {
                  this.newpassword=""
                  this.confirmpassword=""
                  return this.$message.error("确认密码和新密码不一致!");
                }
                else if (this.oldpassword == this.newpassword||this.oldpassword == this.confirmpassword)
                {
                  return this.$message.error("旧密码和新密码一致!");
                }
                      this.$axios.post("/changepassword",
                        {
                        userId:this.userId,
                        oldPassword:this.oldpassword,
                        newPassword:this.newpassword
                        }).then((res)=>{
                        if(res.data.msg=="success"&&res.status == 200)
                        {
                          this.$axios.post("/deletepasswordrequest",{
                            userId:this.userId
                          }).then((ress)=>{
                            if (ress.data.msg == "success"&&res.status == 200)
                            {
                              this.$router.push({path: '/'})
                              return this.$message.success("修改成功，忘记密码请求已撤销，已自动返回登录界面！")
                            }
                            this.$router.push({path: '/'})
                            return this.$message.success("修改成功，已自动返回登录界面！")
                          })

                        }
                        else if(res.data.msg=="falseoldpassword")
                        {

                          this.userId=""
                          this.oldpassword=""
                          this.newpassword=""
                          this.confirmpassword=""
                          return this.$message.error("旧密码或用户名错误！");
                        }
                        else if(res.data.msg == "missingfail")
                        {
                          return this.$message.error("服务超时，请重试！");
                        }

                      })

              }
        }
    }
</script>

<style scoped>
  #mainloginFrame{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #42b983;
  }
  #logincss{
    width: 350px;
    margin: 160px auto; /* 上下间距160px，左右自动居中*/
    background-color: rgb(255, 255, 255); /* 透明背景色 */
    padding: 30px;
    border-radius: 20px; /* 圆角 */
  }


  a:link {
    color: #330099;
    text-decoration: none;
  }
  a:visited {
    text-decoration: none;
  }
  a:hover {
    text-decoration: underline;
    color: #FF0000;
  }
  a:active {
    text-decoration: none;
  }
</style>
